<template>
  <div class="add_dialog" v-if="open" id="add_dialog">
    <div class="basic_info">基本信息</div>
    <form class="layui-form" action="" lay-filter="formTeacherFilter">
      <div class="layui-row">
        <div class="layui-col-xs6">
          <div class="layui-form-item">
            <label class="layui-form-label">采购编码</label>
            <div class="layui-input-block">
              <input
                type="text"
                name="unitNumber"
                placeholder="请输入"
                autocomplete="off"
                class="layui-input"
              />
            </div>
          </div>
        </div>
        <div class="layui-col-xs6">
          <div class="layui-form-item">
            <label class="layui-form-label">采购名称</label>
            <div class="layui-input-block">
              <input
                type="text"
                name="certificateNumber"
                placeholder="请输入"
                autocomplete="off"
                class="layui-input"
              />
            </div>
          </div>
        </div>
      </div>

      <div class="layui-row">
        <div class="layui-col-xs6">
          <div class="layui-form-item">
            <label class="layui-form-label">资产分类</label>
            <div class="layui-input-block" id="department-style">
              <input
                  name="department"
                  type="text"
                  id="tree1"
                  lay-filter="tree1"
                  class="layui-input"
              />
            </div>
          </div>

<!--          <div class="layui-form-item">
            <label class="layui-form-label">资产分类</label>

            <div class="layui-input-inline layui-input-wrap">
              <div class="layui-input-prefix">
                <i class="layui-icon layui-icon-date"></i>
              </div>
              <input
                type="text"
                name="issuingDate"
                id="issuingDate"
                lay-verify="date"
                placeholder="请选择"
                autocomplete="off"
                class="layui-input"
              />
            </div>
          </div>-->
        </div>

        <div class="layui-col-xs12">
          <div class="layui-form-item">
            <label class="layui-form-label">备注</label>
            <div class="layui-input-block">
              <textarea
                name="remark"
                placeholder="请输入"
                class="layui-textarea"
              ></textarea>
            </div>
          </div>
        </div>
        <div class="layui-col-xs12">
          <div class="layui-form-item">
            <div class="layui-input-block">
              <button
                type="button"
                class="layui-btn"
                lay-submit
                lay-filter="add_submit"
              >
                提交
              </button>
              <button
                type="reset"
                class="layui-btn layui-btn-primary reset_from"
                style="display: none"
              >
                取消
              </button>
              <button type="button" class="layui-btn layui-btn-primary cancel">
                取消
              </button>
            </div>
          </div>
        </div>
      </div>
    </form>
  </div>
</template>
<script>
import axios  from "axios";
export default {
  data() {
    return {
      open: true,
    };
  },
  methods: {
    echoData(departmentId) {
      window.layui.use(["form", "treeSelect"], async () => {
        this.treeSelect = window.layui.treeSelect;
        // 树形下拉组件
        this.treeSelect.render({
          // 选择器
          elem: "#tree1",
          // 数据
          data:
            process.env.VUE_APP_BASE_API +
            '/service-pcm/pcm-catalog/query-nodes-flatten',
          // 异步加载方式：get/post，默认get
          type: "post",
          headers: {
            Authorization: "Bearer " + this.token,
          },
          style: {
            folder: {
              // 父节点图标
              enable: true, // 是否开启：true/false
            },
            line: {
              // 连接线
              enable: true, // 是否开启：true/false
            },
          },
          // 占位符
          placeholder: "请选择",
          // 是否开启搜索功能：true/false，默认false
          search: true,
          // 加载完成后的回调函数
          success: (d) => {
            //             // 选中节点，根据id筛选
            console.log('====',departmentId)
            if(departmentId) {
              this.treeSelect.checkNode("tree1", departmentId);
              const dom = document.querySelectorAll('#department-style .layui-treeSelect')
              dom[dom.length - 1].remove()
            }else {
              this.treeSelect.checkNode("tree1", null);
              const dom = document.querySelectorAll('#department-style .layui-treeSelect')
              dom[dom.length - 1].remove()
            }
            /*// 添加点击事件监听
            this.treeSelect.on("click(tree1)", (res) => {
              // res.node.id 通常表示被点击节点的ID
              this.loadSubNodes(res.node.id);
            });*/
// 添加点击事件监听
            this.treeSelect.on("click(tree1)", async (res) => {
              // res.node.id 通常表示被点击节点的ID
              try {
                // 构造请求URL，包含parentId和isLoadAllDescendants参数
                const url = new URL(`${process.env.VUE_APP_BASE_API}/service-pcm/pcm-catalog/query-nodes`);
                url.searchParams.append('parentId', res.node.id); // 假设父节点ID需要作为参数传递
                url.searchParams.append('isLoadAllDescendants', '0'); // 假设需要传递isLoadAllDescendants标志

                const response = await fetch(url.toString(), {
                  method: 'GET',
                  headers: {
                    'Authorization': 'Bearer ' + this.token,
                    // 其他可能需要的头部信息
                  },
                });

                if (!response.ok) {
                  throw new Error(`HTTP error! status: ${response.status}`);
                }

                const subNodes = await response.json();

                // 更新树形组件的数据
                this.treeSelect.updateNode("tree1", { id: res.node.id, children: subNodes });
              } catch (error) {
                console.error("Error loading sub nodes:", error);
              }
            });
          },
       /*   // 新增 loadSubNodes 方法
          loadSubNodes(nodeId) {
            axios.get(process.env.VUE_APP_BASE_API + `/service-pcm/pcm-catalog/query-nodes/${nodeId}`)
                .then(response => {
                  const subNodes = response.data;
                  // 更新树形组件的数据
                  this.treeSelect.updateNode("tree1", { id: nodeId, children: subNodes });
                })
                .catch(error => {
                  console.error("Error loading sub nodes:", error);
                });
          },*/
        });
      });
    },


  },
};
</script>
<style>
.layui-treeSelect {
  width: 79% !important;
  margin-left: 20px !important;
}
</style>
<style scoped lang="scss">
.add_dialog {
  padding: 12px;
  .layui-form-label {
    width: 100px;
  }
  .layui-input {
    width: 80%;
    &.input-91 {
      width: 91.5%;
    }
    &.input-100 {
      width: 100%;
    }
  }
  .layui-textarea {
    width: 92%;
  }
  .layui-upload-drag {
    padding: 0;
    width: 210px;
    height: 100px;
  }
  .isShow-style {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
  }
  .layui-upload-drag .layui-icon {
    font-size: 35px;
  }
  .layui-input-inline {
    width: 214px;
  }
  .basic_info {
    position: relative;
    margin-left: 22px;
    font-size: 16px;
    color: #141313;
    &::before {
      content: "";
      position: absolute;
      top: 50%;
      left: -16px;
      transform: translateY(-50%);
      display: inline-block;
      margin-right: 12px;
      width: 5px;
      height: 15px;
      background-color: #ff6534;
    }
  }
  .image_style {
    width: 100%;
    height: 100%;
  }
}
</style>
